<template>
<div>
    <div class="title">热销推荐</div>
    <ul>
        <router-link custom v-slot="{ navigate}" v-for="item of List" :key="item.id" :to="'/detail/' + item.id">
            <li class="item" @click="navigate" >
                <img class="item-img" :src='item.imgUrl'>
            <div class="item-info">
                <p class="item-title">{{ item.title }}</p>
                <p class="item-desc">{{ item.address }}</p>
                <button class="item-button">查看详情</button>
            </div>
        </li>
        </router-link>
        
    </ul>
</div>
</template>

<script>
export default {
    name: "HomeRecommend",
    props: {
        List: Array
    }
    }
</script>

<style lang="stylus" scoped>
@import '../../../assets/styles/mixins.styl';
    .title
        margin-top .2rem
        line-height .8rem
        background #eee
        text-indent .2rem
    .item
        display flex
        overflow hidden
        height 1.9rem
        .item-img
            height  1.7rem
            width  1.7rem
            padding .1rem
        .item-info 
            flex: 1
            padding .1rem
            min-width 0
            .item-title
                line-height .54rem
                font-size .32rem
            .item-desc
                line-height .4rem
                color #ccc
                ellipsis()
            .item-button
                background #ff9300
                padding 0 .2rem
                border-radius: .06rem
                line-height .44rem
                margin-top .16rem
                color #fff
                
</style>